<template>
  <div class="width-100">
    <el-upload
	    ref="upload"
	    action="action"
	    multiple :limit="limit"
	    :auto-upload="true"
	    :show-file-list="false"
	    accept=".jpg,.jpeg,.png,.svg,.gif"
      :on-exceed="handleImageExceed"
	    :http-request="handleImageUpload">
	    <div class="image-list-container float-left mar-rgt-10">
		    <div v-for="(image, index) in cmpImageList" :key="index" class="image-list-item">
			    <el-image
				    class="img"
				    :src="image.url"
				    :preview-src-list="cmpImageList.map(img => img.url)"
				    :z-index="index"
				    fit="cover"></el-image>
			    <i class="el-icon-delete image-delete-icon" @click="clickDeleteImage(index)"></i>
		    </div>
	    </div>
	    <div slot="trigger" class="add-image-container float-right">
		    <i class="el-icon-plus"></i>
	    </div>
    </el-upload>
  </div>
</template>

<script>
	import {messageHandle} from "@/utils";
	import {msgCode} from "@/config/string";
	import {assetBaseUrl} from "@/config/env";
	import {uploadFileType, uploadPreviewType} from "@/config/common";

	export default {
    name: 'ImageUpload',
    props: {
	    previewType: {
        type: String,
        default: uploadPreviewType.room
      },
      imageList: {
        type: Array,
	      default: () => {
					return [];
	      }
      },
	    limit: {
		    type: Number,
		    default: 5
	    },
	    showMsg: {
		    type: Boolean,
		    default: false
	    },
    },
    data() {
      return {
        fileList: [],
        dialogVisible: false,
        dialogImageUrl: ''
      }
    },
		computed: {
		  cmpImageList() {
				return this.imageList.map(image => {
					const {filePath = ''} = image;
					return {
						...image,
						url: `${assetBaseUrl}/file/download/${filePath}`,
					};
				});
		  }
		},
    methods: {
	    handleImageExceed() {
        this.$message.warning(`单次最多只能上传 ${this.limit} 张图片，已超出 ${this.limit} 张图片！`);
      },
	    clickDeleteImage(index) {
		    this.imageList.splice(index, 1);
	    },
	    handleImageUpload(content) {
		    if (content.file.size / 1024.0 / 1024.0 > 5) {
			    this.$message.warning('图片大小不能超过 5MB，请重新上传！');
			    return false;
		    }
		    const formData = new FormData();
		    formData.append("file", content.file);
		    const params = {
			    type: uploadFileType.preview,
			    previewType: this.previewType,
		    };
		    API.file.fileUpload(formData, params).then(resp => {
			    this.showMsg && messageHandle({code: msgCode.UPLOAD_SUCCESS, title: '预览图片'});
			    const {files = []} = resp.data;
					files.forEach(file => this.imageList.push(file));
		    }).catch(err => {
			    console.log('##### err #####', err);
		    });
      },
    }
  }
</script>
<style lang="less" scoped>

	.add-image-container {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100px;
		height: 100px;
		color: @colorGray60;
		font-size: 20px;
		border-radius: 4px;
		border: 1px dashed @colorGray90;

		&:hover {
			border: 1px dashed @colorPrimary;
			color: @colorPrimary;
		}
	}

	.image-list-container {
	  display: flex;
	  justify-content: flex-start;
	  align-items: center;
	  flex-wrap: wrap;
	  gap: 10px;

	  .image-list-item {
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  width: 100px;
		  height: 100px;
		  position: relative;
		  overflow: hidden;
		  border: 1px solid @colorGray90;

		  .image-delete-icon {
			  position: absolute;
			  display: none;
			  top: 2px;
			  right: 2px;
			  color: @colorGray60;
			  font-size: 18px;
			  cursor: pointer;

			  &:hover {
				  font-weight: bold;
				  color: @colorDanger;
			  }
		  }

		  &:hover {
			  .image-delete-icon {
				  display: block;
			  }
		  }
	  }
  }
</style>